<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
      <el-form-item label="注册日期">
        <el-date-picker
          v-model="dateRange"
          style="width: 240px"
          value-format="yyyy-MM-dd HH:mm:ss"
          type="datetimerange"
          range-separator="-"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
        ></el-date-picker>
      </el-form-item>

      <el-form-item label="服务商名称" prop="providersName" label-width="100px">
        <el-input
          v-model="queryParams.providersName"
          placeholder="服务商名称"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <!--      两下拉查询只需要传给后端id&code就行了-->
      <!--      这个下拉改成字典服务状态下拉-->
      <el-form-item label="订单状态" prop="orderStatus">
        <el-select v-model="queryParams.orderStatus" placeholder="请选择" filterable popper-class="my-dropdown" clearable
                   :value-key="'code'">
          <el-option v-for="item in orderStatusListSelectOptions" :key="item.code" :label="item.name"
                     :value="item.code"></el-option>
        </el-select>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <!--        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>-->
      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          type="primary"
          plain
          icon="el-icon-plus"
          size="mini"
          @click="handleAdd"
        >新增
        </el-button>
      </el-col>
      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
    </el-row>

    <el-table v-loading="loading" :data="manageList" @selection-change="handleSelectionChange">
      <el-table-column label="操作" align="center" width="220">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click="handleUpdate(scope.row,'audit')"
          >审核
          </el-button>
          <el-button
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click="handleUpdate(scope.row,'accounting')"
          >入账
          </el-button>
          <el-button
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click="handleUpdate(scope.row,'edit')"
          >修改
          </el-button>
          <el-button
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click="handleUpdate(scope.row,'detail')"
          >详情
          </el-button>
        </template>
      </el-table-column>
      <el-table-column label="订单ID" prop="orderId" align="center" width="350"/>
      <el-table-column label="订单金额" prop="orderMoney" align="center" width="150"/>
      <el-table-column label="订单币种" prop="orderCurrencyName" align="center" width="150"/>
      <el-table-column label="订单收款方" prop="payeeName" align="center" width="150"/>
      <el-table-column label="订单发生国" prop="occurNationalName" align="center" width="150"/>
      <el-table-column label="付款方" prop="payer" align="center" width="150"/>
      <el-table-column label="付款说明" prop="payExplanation" align="center" width="150"/>
      <el-table-column label="审核时间" prop="auditTime" align="center" width="150"/>
      <el-table-column label="审核意见" prop="auditStatusName" align="center" width="150"/>
      <el-table-column label="入账金额" prop="accountingMoney" align="center" width="150"/>
      <el-table-column label="入账币种" prop="accountingCurrencyName" align="center" width="150"/>
      <el-table-column label="订单状态" prop="orderStatusName" align="center" width="150"/>
      <el-table-column label="创建时间" prop="createTime" align="center" width="150"/>
      <el-table-column label="描述" prop="remark" align="center" width="350" class-name="small-padding fixed-width">
        <template slot-scope="scope">
          {{ scope.row.description }}
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />

    <!--     添加或修改对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="1020px" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="200px">
        <span style="font-weight: bold; color: #333;position: relative;top: -15px;font-size: 15px;left: 41px;">基本信息
          <span
            style="position: absolute;display: inline-block; width: 1321%; border-bottom: 1px solid #ccc;margin-top: 9px;"></span></span>

        <el-row v-if="showAddOrUpdateView">
          <!--新增和编辑的-->
          <el-row>
            <el-col :span="10">
              <el-form-item label="订单ID" prop="orderId">
                <el-input v-model="form.orderId" :disabled="true"/>
              </el-form-item>
            </el-col>
            <el-col :span="10" v-if="showAccountingId">
              <el-form-item label="入账流水号" prop="accountingId">
                <el-input v-model="form.accountingId" :disabled="true"/>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="10">
              <el-form-item label="订单金额" prop="orderMoney">
                <el-input v-model="form.orderMoney" type="number" :disabled="showPayerDisabled"/>
              </el-form-item>
            </el-col>
            <el-col :span="10">
              <el-form-item label="订单币种" prop="orderCurrency">
                <template #label>
                  <span style="color: red;">*</span>订单币种
                </template>
                <el-select v-model="orderCurrency" placeholder="请选择" filterable popper-class="my-dropdown"
                           :value-key="'code'" :disabled="showPayerDisabled">
                  <el-option v-for="item in orderCurrencySelectOptions" :key="item.code" :label="item.name"
                             :value="item"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="10">
              <el-form-item label="收款方" prop="payee">
                <template #label>
                  <span style="color: red;">*</span>收款方
                </template>
                <el-select v-model="payee" placeholder="请选择" filterable popper-class="my-dropdown"
                           :value-key="'code'" :disabled="showPayerDisabled">
                  <el-option v-for="item in payeeSelectOptions" :key="item.code" :label="item.name"
                             :value="item"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="10">
              <el-form-item label="发生国" prop="occurNational">
                <template #label>
                  <span style="color: red;">*</span>发生国
                </template>
                <el-select v-model="occurNational" placeholder="请选择" filterable popper-class="my-dropdown"
                           :value-key="'code'" :disabled="showPayerDisabled">
                  <el-option v-for="item in occurNationalSelectOptions" :key="item.code" :label="item.name"
                             :value="item"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>

          <span style="font-weight: bold; color: #333;position: relative;top: -15px;font-size: 15px;left: 41px;">付款信息
          <span
            style="position: absolute;display: inline-block; width: 1321%; border-bottom: 1px solid #ccc;margin-top: 9px;"></span></span>

          <el-row>
            <el-col :span="20">
              <el-form-item label="付款方" prop="payer">
                <el-input v-model="form.payer" :disabled="showPayerDisabled"/>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="10">
              <el-form-item label="付款银行" prop="payBank">
                <el-input v-model="form.payBank" :disabled="showPayerDisabled"/>
              </el-form-item>
            </el-col>
            <el-col :span="10">
              <el-form-item label="付款账户" prop="payAccount">
                <el-input v-model="form.payAccount" :disabled="showPayerDisabled"/>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="10">
              <el-form-item label="付款说明" prop="payExplanation">
                <el-input v-model="form.payExplanation" :disabled="showPayerDisabled"/>
              </el-form-item>
            </el-col>
            <el-col :span="10">
              <el-form-item label="预计付款">
                <el-date-picker
                  v-model="form.payTime"
                  type="datetime"
                  placeholder="选择预计付款时间"
                  ref="startTimePicker"
                  clearable
                  value-format="yyyy-MM-dd HH:mm:ss"
                  format="yyyy-MM-dd HH:mm:ss"
                  :disabled="showPayerDisabled"
                />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="10">
              <el-form-item label="">
                <el-button type="primary" @click="moduleFileClick">模板下载</el-button>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="10">
              <el-form-item label="业务清单" prop="businessList">
                <el-upload
                  class="upload-file-uploader"
                  action="/dev-api/file/uploadFile/"
                  :on-success="businessListHandleSuccess"
                  :on-remove="businessListHandleRemove"
                  :before-upload="businessListBeforeUpload"
                  :file-list="businessList"
                  :headers="headers"
                  :limit="1"
                  list-type="text"
                  accept=".pdf"
                  show-file-list
                  :disabled="showPayerDisabled"
                >
                  <i class="el-icon-plus"></i>
                </el-upload>
              </el-form-item>
            </el-col>

            <el-col :span="10">
              <el-form-item label="合同文件" prop="contractDocuments">
                <el-upload
                  class="upload-file-uploader"
                  action="/dev-api/file/uploadFile/"
                  :on-success="contractDocumentsFileHandleSuccess"
                  :on-remove="contractDocumentsFileHandleRemove"
                  :before-upload="contractDocumentsFileBeforeUpload"
                  :file-list="contractDocumentsFile"
                  :headers="headers"
                  :limit="1"
                  list-type="text"
                  accept=".pdf"
                  show-file-list
                  :disabled="showPayerDisabled"
                >
                  <i class="el-icon-plus"></i>
                </el-upload>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="10" v-if="showExpressDelivery">
              <el-form-item label="快递单据" prop="expressDelivery">
                <el-upload
                  class="upload-file-uploader"
                  action="/dev-api/file/upload/"
                  :on-success="expressDeliveryFileHandleSuccess"
                  :on-remove="expressDeliveryFileHandleRemove"
                  :before-upload="expressDeliveryFileBeforeUpload"
                  :file-list="expressDeliveryFile"
                  :headers="headers"
                  :limit="1"
                  list-type="picture-card"
                  :disabled="showPayerDisabled"
                >
                  <i class="el-icon-plus"></i>
                </el-upload>
              </el-form-item>
            </el-col>
            <el-col :span="10">
              <el-form-item label="清关文件" prop="customsClearance">
                <el-upload
                  class="upload-file-uploader"
                  action="/dev-api/file/uploadFile/"
                  :on-success="customsClearanceFileHandleSuccess"
                  :on-remove="customsClearanceFileHandleRemove"
                  :before-upload="customsClearanceFileBeforeUpload"
                  :file-list="customsClearanceFile"
                  :headers="headers"
                  :limit="1"
                  list-type="text"
                  accept=".pdf"
                  show-file-list
                  :disabled="showPayerDisabled"
                >
                  <i class="el-icon-plus"></i>
                </el-upload>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="10">
              <el-form-item label="付款回单" prop="paymentReceipt">
                <el-upload
                  class="upload-file-uploader"
                  action="/dev-api/file/upload/"
                  :on-success="paymentReceiptFileHandleSuccess"
                  :on-remove="paymentReceiptFileHandleRemove"
                  :before-upload="paymentReceiptFileBeforeUpload"
                  :file-list="paymentReceiptFile"
                  :headers="headers"
                  :limit="1"
                  list-type="picture-card"
                  :disabled="showPayerDisabled"
                >
                  <i class="el-icon-plus"></i>
                </el-upload>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="20">
              <el-form-item label="付款备注" prop="payRemark">
                <el-input v-model="form.payRemark" :disabled="showPayerDisabled"/>
              </el-form-item>
            </el-col>
          </el-row>
          <!--          新增需要隐藏的部分-->
          <span v-if="showCreateMsg"
                style="font-weight: bold; color: #333;position: relative;top: -15px;font-size: 15px;left: 41px;">创建信息
          <span
            style="position: absolute;display: inline-block; width: 1321%; border-bottom: 1px solid #ccc;margin-top: 9px;"></span></span>

          <el-row v-if="showCreateMsg">
            <el-col :span="20">
              <el-form-item label="备注" prop="remark">
                <el-input v-model="form.remark"/>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row v-if="showCreateTimeAndName">
            <el-col :span="10">
              <el-form-item label="创建人" prop="createByName">
                <el-input v-model="form.createByName" :disabled="true"/>
              </el-form-item>
            </el-col>
            <el-col :span="10">
              <el-form-item label="创建时间" prop="createTime">
                <el-input v-model="form.createTime" :disabled="true"/>
              </el-form-item>
            </el-col>
          </el-row>

          <span v-if="showAuditMsg"
                style="font-weight: bold; color: #333;position: relative;top: -15px;font-size: 15px;left: 41px;">审核信息
          <span
            style="position: absolute;display: inline-block; width: 1321%; border-bottom: 1px solid #ccc;margin-top: 9px;"></span></span>

          <el-row v-if="showAuditMsg">
            <el-col :span="10">
              <el-form-item label="审核操作" prop="auditStatus">
                <template #label>
                  <span style="color: red;">*</span>审核操作
                </template>
                <el-select v-model="auditStatus" placeholder="请选择" filterable popper-class="my-dropdown"
                           :value-key="'code'">
                  <el-option v-for="item in auditStatusSelectOptions" :key="item.code" :label="item.name"
                             :value="item"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row v-if="showAuditMsg">
            <el-col :span="20">
              <el-form-item label="审核说明" prop="auditRemark">
                <el-input v-model="form.auditRemark"/>
              </el-form-item>
            </el-col>
          </el-row>

          <span v-if="showAccountingMsg"
                style="font-weight: bold; color: #333;position: relative;top: -15px;font-size: 15px;left: 41px;">入账信息
          <span
            style="position: absolute;display: inline-block; width: 1321%; border-bottom: 1px solid #ccc;margin-top: 9px;"></span></span>

          <el-row v-if="showAccountingMsg">
            <el-col :span="10">
              <el-form-item label="金额" prop="accountingMoney">
                <el-input v-model="form.accountingMoney" type="number"/>
              </el-form-item>
            </el-col>
            <el-col :span="10">
              <el-form-item label="币种" prop="accountingCurrency">
                <el-select v-model="accountingCurrency" placeholder="请选择" filterable popper-class="my-dropdown"
                           :value-key="'code'">
                  <el-option v-for="item in accountingCurrencySelectOptions" :key="item.code" :label="item.name"
                             :value="item"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row v-if="showAccountingMsg">
            <el-col :span="10">
              <el-form-item label="入账账户" prop="accountingAccount">
                <el-select v-model="accountingAccount" placeholder="请选择" filterable popper-class="my-dropdown"
                           :value-key="'code'">
                  <el-option v-for="item in accountingAccountSelectOptions" :key="item.code" :label="item.name"
                             :value="item"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="10">
              <el-form-item label="三方流水号" prop="thirdId">
                <el-input v-model="form.thirdId"/>
              </el-form-item>
            </el-col>
          </el-row>

        </el-row>

        <el-row v-if="showDetailView">
          <!--详情-->
          <el-row>
            <el-col :span="10">
              <el-form-item label="订单ID" prop="orderId">
                <el-input v-model="form.orderId" :disabled="true"/>
              </el-form-item>
            </el-col>
            <el-col :span="10">
              <el-form-item label="入账流水号" prop="accountingId">
                <el-input v-model="form.accountingId" :disabled="true"/>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="10">
              <el-form-item label="订单金额" prop="orderMoney">
                <el-input v-model="form.orderMoney" type="number" :disabled="true"/>
              </el-form-item>
            </el-col>
            <el-col :span="10">
              <el-form-item label="订单币种" prop="orderCurrency">
                <template #label>
                  <span style="color: red;">*</span>订单币种
                </template>
                <el-select v-model="orderCurrency" placeholder="请选择" filterable popper-class="my-dropdown"
                           :value-key="'code'" :disabled="true">
                  <el-option v-for="item in orderCurrencySelectOptions" :key="item.code" :label="item.name"
                             :value="item"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="10">
              <el-form-item label="收款方" prop="payee">
                <template #label>
                  <span style="color: red;">*</span>收款方
                </template>
                <el-select v-model="payee" placeholder="请选择" filterable popper-class="my-dropdown"
                           :value-key="'code'" :disabled="true">
                  <el-option v-for="item in payeeSelectOptions" :key="item.code" :label="item.name"
                             :value="item"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="10">
              <el-form-item label="发生国" prop="occurNational">
                <template #label>
                  <span style="color: red;">*</span>发生国
                </template>
                <el-select v-model="occurNational" placeholder="请选择" filterable popper-class="my-dropdown"
                           :value-key="'code'" :disabled="true">
                  <el-option v-for="item in occurNationalSelectOptions" :key="item.code" :label="item.name"
                             :value="item"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>

          <span style="font-weight: bold; color: #333;position: relative;top: -15px;font-size: 15px;left: 41px;">付款信息
          <span
            style="position: absolute;display: inline-block; width: 1321%; border-bottom: 1px solid #ccc;margin-top: 9px;"></span></span>

          <el-row>
            <el-col :span="20">
              <el-form-item label="付款方" prop="payer">
                <el-input v-model="form.payer" :disabled="true"/>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="10">
              <el-form-item label="付款银行" prop="payBank">
                <el-input v-model="form.payBank" :disabled="true"/>
              </el-form-item>
            </el-col>
            <el-col :span="10">
              <el-form-item label="付款账户" prop="payAccount">
                <el-input v-model="form.payAccount" :disabled="true"/>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="10">
              <el-form-item label="付款说明" prop="payExplanation">
                <el-input v-model="form.payExplanation" :disabled="true"/>
              </el-form-item>
            </el-col>
            <el-col :span="10">
              <el-form-item label="预计付款">
                <el-date-picker
                  v-model="form.payTime"
                  type="datetime"
                  placeholder="选择预计付款时间"
                  ref="startTimePicker"
                  clearable
                  value-format="yyyy-MM-dd"
                  format="yyyy-MM-dd"
                  :disabled="true"
                />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="10">
              <el-form-item label="业务清单" prop="businessList">
                <el-upload
                  class="upload-file-uploader"
                  action="/dev-api/file/uploadFile/"
                  :on-success="businessListHandleSuccess"
                  :on-remove="businessListHandleRemove"
                  :before-upload="businessListBeforeUpload"
                  :file-list="businessList"
                  :headers="headers"
                  :limit="1"
                  list-type="text"
                  accept=".pdf"
                  show-file-list
                  :disabled="true"
                >
                  <i class="el-icon-plus"></i>
                </el-upload>
              </el-form-item>
            </el-col>
            <el-col :span="10">
              <el-form-item label="合同文件" prop="contractDocuments">
                <el-upload
                  class="upload-file-uploader"
                  action="/dev-api/file/uploadFile/"
                  :on-success="contractDocumentsFileHandleSuccess"
                  :on-remove="contractDocumentsFileHandleRemove"
                  :before-upload="contractDocumentsFileBeforeUpload"
                  :file-list="contractDocumentsFile"
                  :headers="headers"
                  :limit="1"
                  list-type="text"
                  accept=".pdf"
                  show-file-list
                  :disabled="true"
                >
                  <i class="el-icon-plus"></i>
                </el-upload>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="10" v-if="showExpressDelivery">
              <el-form-item label="快递单据" prop="expressDelivery">
                <el-upload
                  class="upload-file-uploader"
                  action="/dev-api/file/upload/"
                  :on-success="expressDeliveryFileHandleSuccess"
                  :on-remove="expressDeliveryFileHandleRemove"
                  :before-upload="expressDeliveryFileBeforeUpload"
                  :file-list="expressDeliveryFile"
                  :headers="headers"
                  :limit="1"
                  list-type="picture-card"
                  :disabled="true"
                >
                  <i class="el-icon-plus"></i>
                </el-upload>
              </el-form-item>
            </el-col>
            <el-col :span="10">
              <el-form-item label="清关文件" prop="customsClearance">
                <el-upload
                  class="upload-file-uploader"
                  action="/dev-api/file/uploadFile/"
                  :on-success="customsClearanceFileHandleSuccess"
                  :on-remove="customsClearanceFileHandleRemove"
                  :before-upload="customsClearanceFileBeforeUpload"
                  :file-list="customsClearanceFile"
                  :headers="headers"
                  :limit="1"
                  list-type="text"
                  accept=".pdf"
                  show-file-list
                  :disabled="true"
                >
                  <i class="el-icon-plus"></i>
                </el-upload>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="10">
              <el-form-item label="付款回单" prop="paymentReceipt">
                <el-upload
                  class="upload-file-uploader"
                  action="/dev-api/file/upload/"
                  :on-success="paymentReceiptFileHandleSuccess"
                  :on-remove="paymentReceiptFileHandleRemove"
                  :before-upload="paymentReceiptFileBeforeUpload"
                  :file-list="paymentReceiptFile"
                  :headers="headers"
                  :limit="1"
                  list-type="picture-card"
                  :disabled="true"
                >
                  <i class="el-icon-plus"></i>
                </el-upload>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="20">
              <el-form-item label="付款备注" prop="payRemark">
                <el-input v-model="form.payRemark" :disabled="true"/>
              </el-form-item>
            </el-col>
          </el-row>

          <span
            style="font-weight: bold; color: #333;position: relative;top: -15px;font-size: 15px;left: 41px;">审核信息
          <span
            style="position: absolute;display: inline-block; width: 1321%; border-bottom: 1px solid #ccc;margin-top: 9px;"></span></span>

          <el-row>
            <el-col :span="10">
              <el-form-item label="审核结果" prop="auditStatus">
                <template #label>
                  <span style="color: red;">*</span>审核结果
                </template>
                <el-select v-model="auditStatus" placeholder="请选择" filterable popper-class="my-dropdown"
                           :value-key="'code'" :disabled="true">
                  <el-option v-for="item in auditStatusSelectOptions" :key="item.code" :label="item.name"
                             :value="item"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="10">
              <el-form-item label="审核人" prop="auditByName">
                <el-input v-model="form.auditByName" :disabled="true"/>
              </el-form-item>
            </el-col>
            <el-col :span="10">
              <el-form-item label="审核时间" prop="auditTime">
                <el-input v-model="form.auditTime" :disabled="true"/>
              </el-form-item>
            </el-col>
          </el-row>

          <span
            style="font-weight: bold; color: #333;position: relative;top: -15px;font-size: 15px;left: 41px;">入账信息
          <span
            style="position: absolute;display: inline-block; width: 1321%; border-bottom: 1px solid #ccc;margin-top: 9px;"></span></span>

          <el-row>
            <el-col :span="10">
              <el-form-item label="金额" prop="accountingMoney">
                <el-input v-model="form.accountingMoney" type="number" :disabled="true"/>
              </el-form-item>
            </el-col>
            <el-col :span="10">
              <el-form-item label="币种" prop="accountingCurrency">
                <el-select v-model="accountingCurrency" placeholder="请选择" filterable popper-class="my-dropdown"
                           :value-key="'code'" :disabled="true">
                  <el-option v-for="item in accountingCurrencySelectOptions" :key="item.code" :label="item.name"
                             :value="item"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="10">
              <el-form-item label="入账账户" prop="accountingAccount">
                <el-select v-model="accountingAccount" placeholder="请选择" filterable popper-class="my-dropdown"
                           :value-key="'code'" :disabled="true">
                  <el-option v-for="item in accountingAccountSelectOptions" :key="item.code" :label="item.name"
                             :value="item"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="10">
              <el-form-item label="三方流水号" prop="thirdId">
                <el-input v-model="form.thirdId" :disabled="true"/>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="10">
              <el-form-item label="入账人" prop="accountingByName">
                <el-input v-model="form.accountingByName" :disabled="true"/>
              </el-form-item>
            </el-col>
            <el-col :span="10">
              <el-form-item label="入账时间" prop="accountingTime">
                <el-input v-model="form.accountingTime" :disabled="true"/>
              </el-form-item>
            </el-col>
          </el-row>

          <span
            style="font-weight: bold; color: #333;position: relative;top: -15px;font-size: 15px;left: 41px;">修改信息
          <span
            style="position: absolute;display: inline-block; width: 1321%; border-bottom: 1px solid #ccc;margin-top: 9px;"></span></span>


          <el-row>
            <el-col :span="10">
              <el-form-item label="修改人" prop="modifyByName">
                <el-input v-model="form.modifyByName" :disabled="true"/>
              </el-form-item>
            </el-col>
            <el-col :span="10">
              <el-form-item label="修改时间" prop="modifyTime">
                <el-input v-model="form.modifyTime" :disabled="true"/>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="10">
              <el-form-item label="创建人" prop="createByName">
                <el-input v-model="form.createByName" :disabled="true"/>
              </el-form-item>
            </el-col>
            <el-col :span="10">
              <el-form-item label="创建时间" prop="createTime">
                <el-input v-model="form.createTime" :disabled="true"/>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="20">
              <el-form-item label="备注" prop="remark">
                <el-input v-model="form.remark" :disabled="true"/>
              </el-form-item>
            </el-col>
          </el-row>

        </el-row>

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm" v-if="showBtn">确 定</el-button>
        <el-button @click="cancel">关 闭</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {listPaymentOrder, getPaymentOrder, addPaymentOrder, updatePaymentOrder} from "@/api/system/paymentOrder";
import {getUnique} from "@/api/system/uniqueValue";
import {
  getNationalSelect,
  getServiceStatusSelect,
  getRegisterCustomerPayeeSelect,
  getAccountSelect,
  getCurrencySelect
} from "@/api/system/selectList";
import {addDateRange2} from "@/utils/ruoyi";
import {MessageBox} from 'element-ui';
import {getToken} from "@/utils/auth";

export default {
  name: "National",
  data() {
    return {
      headers: {
        Authorization: "Bearer " + getToken()
      },
      //下拉选项
      //模态框归属国家的下拉
      modifyMessage: '',
      //列表搜索框服务状态下拉
      serviceStatusListSelectOptions: [],
      //列表搜索订单状态下拉
      orderStatusListSelectOptions: [],
      //列表搜索订单币种下拉
      orderCurrencyListSelectOptions: [],
      //列表搜索收款方下拉
      payeeListSelectOptions: [],

      //模态框审核状态下拉
      auditStatus: [],
      auditStatusSelectOptions: [],
      //模态框收款方下拉
      payee: [],
      payeeSelectOptions: [],
      //模态框 订单币种下拉
      orderCurrency: [],
      orderCurrencySelectOptions: [],
      //模态框 发生国家下拉
      occurNational: [],
      occurNationalSelectOptions: [],
      //模态框 币种(入账信息)下拉
      accountingCurrency: [],
      accountingCurrencySelectOptions: [],
      //模态框 入账账户下拉
      accountingAccount: [],
      accountingAccountSelectOptions: [],
      //业务清单 file
      businessList: [],
      //合同文件 file
      contractDocumentsFile: [],
      //快递单据 file
      expressDeliveryFile: [],
      //清关文件 file
      customsClearanceFile: [],
      //付款回单 file
      paymentReceiptFile: [],
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      //显示条件
      showBtn: true,
      showModifyTime: true,
      showModifyByName: true,
      showModifyDescription: true,
      showModifyMsg: true,
      showCreateTime: true, //暂不用
      showCreateByName: true, //暂不用
      showCreateTimeAndName: true,
      showCreateMsg: true,
      showAuditMsg: true,
      showAccountingMsg: true,
      showExpressDelivery: true,
      showAccountingId: true,
      //付款信息disabled
      showPayerDisabled: true,
      // 非多个禁用
      multiple: true,
      showAddOrUpdateView: true,
      showDetailView: true,
      // 显示搜索条件
      showSearch: true,
      dateRange: [],
      dateRange2: [],
      // 总条数
      total: 0,
      // 公告表格数据
      manageList: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        name: undefined,
        nickname: undefined,
        channel: undefined
      },
      // 表单参数
      form: {},
      formView: {},
      // 表单校验
      rules: {
        orderMoney: [
          {required: true, message: "请输入订单金额", trigger: "blur"}
        ],
      }
    };
  },
  created() {
    this.getList();
  },
  methods: {
    moduleFileClick() {
      getServiceStatusSelect('PAYMENT_ORDER_TEMPLATE_DOWNLOAD').then(response => {
        var url = response.data[0].name;
        var name = response.data[0].code;
        this.$download.saveAs(url, name);
      });
    },
    paymentReceiptFileHandleSuccess(response, file, farenFileList) {
      // 上传成功的回调
      this.paymentReceiptFile.push({url: response.data});

      this.form.paymentReceipt = this.paymentReceiptFile.map(item => item.url).join(',');
    },
    paymentReceiptFileHandleRemove(file, farenFileList) {
      // 文件移除时的回调
      const index = this.paymentReceiptFile.findIndex(item => item.url === file.url);
      if (index !== -1) {
        this.paymentReceiptFile.splice(index, 1);
      }
      this.form.paymentReceipt = this.paymentReceiptFile.map(item => item.url).join(',');
    },
    paymentReceiptFileBeforeUpload(file) {
      // 在上传前的钩子，可以在这里添加一些判断逻辑
      // 返回 false 可取消上传
      return true;
    },

    customsClearanceFileHandleSuccess(response, file, fileList) {
      // this.authorizationFile.push({url: response.data});
      // this.form.authorizationFile = this.authorizationFile.map(item => item.url).join(',');
      // 上传成功的回调
      this.customsClearanceFile = fileList.map(fileItem => ({
        name: fileItem.name || fileItem.raw.name,
        url: response.data,
        uid: fileItem.uid
      }));
      console.log("this.customsClearanceFile=", this.customsClearanceFile);
      this.form.customsClearance = this.customsClearanceFile.map(fileItem => fileItem.url).join(',');
      console.log("this.customsClearanceFile=", this.form.customsClearanceFile);
    },
    customsClearanceFileHandleRemove(file, farenFileList) {
      // 文件移除时的回调
      const index = this.customsClearanceFile.findIndex(item => item.url === file.url);
      if (index !== -1) {
        this.customsClearanceFile.splice(index, 1);
      }
      this.form.customsClearance = this.customsClearanceFile.map(item => item.url).join(',');
    },
    customsClearanceFileBeforeUpload(file) {
      // 在上传前的钩子，可以在这里添加一些判断逻辑
      // 返回 false 可取消上传
      const isPDF = file.type === 'application/pdf';
      if (!isPDF) {
        this.$message.error('上传文件必须是 PDF 格式!');
      }
      return isPDF;
    },

    expressDeliveryFileHandleSuccess(response, file, farenFileList) {
      // 上传成功的回调
      this.expressDeliveryFile.push({url: response.data});

      this.form.expressDelivery = this.expressDeliveryFile.map(item => item.url).join(',');
    },
    expressDeliveryFileHandleRemove(file, farenFileList) {
      // 文件移除时的回调
      const index = this.expressDeliveryFile.findIndex(item => item.url === file.url);
      if (index !== -1) {
        this.expressDeliveryFile.splice(index, 1);
      }
      this.form.expressDelivery = this.expressDeliveryFile.map(item => item.url).join(',');
    },
    expressDeliveryFileBeforeUpload(file) {
      // 在上传前的钩子，可以在这里添加一些判断逻辑
      // 返回 false 可取消上传
      return true;
    },

    contractDocumentsFileHandleSuccess(response, file, fileList) {
      // this.authorizationFile.push({url: response.data});
      // this.form.authorizationFile = this.authorizationFile.map(item => item.url).join(',');
      // 上传成功的回调
      this.contractDocumentsFile = fileList.map(fileItem => ({
        name: fileItem.name || fileItem.raw.name,
        url: response.data,
        uid: fileItem.uid
      }));
      console.log("this.contractDocumentsFile=", this.contractDocumentsFile);
      this.form.contractDocuments = this.contractDocumentsFile.map(fileItem => fileItem.url).join(',');
      console.log("this.contractDocumentsFile=", this.form.contractDocumentsFile);
    },
    contractDocumentsFileHandleRemove(file, farenFileList) {
      // 文件移除时的回调
      const index = this.contractDocumentsFile.findIndex(item => item.url === file.url);
      if (index !== -1) {
        this.contractDocumentsFile.splice(index, 1);
      }
      this.form.contractDocuments = this.contractDocumentsFile.map(item => item.url).join(',');
    },
    contractDocumentsFileBeforeUpload(file) {
      // 在上传前的钩子，可以在这里添加一些判断逻辑
      // 返回 false 可取消上传
      const isPDF = file.type === 'application/pdf';
      if (!isPDF) {
        this.$message.error('上传文件必须是 PDF 格式!');
      }
      return isPDF;
    },

    businessListHandleSuccess(response, file, fileList) {
      // this.authorizationFile.push({url: response.data});
      // this.form.authorizationFile = this.authorizationFile.map(item => item.url).join(',');
      // 上传成功的回调
      this.businessList = fileList.map(fileItem => ({
        name: fileItem.name || fileItem.raw.name,
        url: response.data,
        uid: fileItem.uid
      }));
      console.log("this.businessList=", this.businessList);
      this.form.businessList = this.businessList.map(fileItem => fileItem.url).join(',');
      console.log("this.businessList=", this.form.businessList);
    },
    businessListHandleRemove(file, farenFileList) {
      // 文件移除时的回调
      const index = this.businessList.findIndex(item => item.url === file.url);
      if (index !== -1) {
        this.businessList.splice(index, 1);
      }
      this.form.businessList = this.businessList.map(item => item.url).join(',');
    },
    businessListBeforeUpload(file) {
      // 在上传前的钩子，可以在这里添加一些判断逻辑
      // 返回 false 可取消上传
      const isPDF = file.type === 'application/pdf';
      if (!isPDF) {
        this.$message.error('上传文件必须是 PDF 格式!');
      }
      return isPDF;
    },


    handleStatus(row, status) {
      const id = row.id || this.ids;
      const statusStr = status == '3' ? '禁用' : '启用';
      var email = row.email;
      // 使用 Element UI 的 MessageBox 弹出确认框
      MessageBox.confirm(`是否"${statusStr}"邮箱为"${email}"的注册客户，请确认此次的操作`, '警告信息', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        // 用户点击确定按钮时执行的操作
        editStatus(id, status).then(response => {
          this.$modal.msgSuccess(statusStr + "成功");
          this.getList();
        });
      }).catch(() => {
        // 用户点击取消按钮时执行的操作
      });
    },
    getImgOpenPage(obj) {
      var url = obj;
      window.open(url);
    },
    getStatusColor(state) {
      // 根据状态值动态返回颜色
      return state == 0 ? 'red' : 'green';
    },
    getList() {
      this.loading = true;
      listPaymentOrder(addDateRange2(this.queryParams, this.dateRange, this.dateRange2)).then(response => {
        this.manageList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
      //订单状态
      getServiceStatusSelect('PAYMENT_ORDER_STATUS').then(response => {
        this.orderStatusListSelectOptions = response.data;
      });
      //审核状态
      getServiceStatusSelect('PAYMENT_ORDER_AUDIT_STATUS').then(response => {
        this.auditStatusSelectOptions = response.data;
      });
      //国家
      getNationalSelect().then(response => {
        this.occurNationalSelectOptions = response.data;
      });
      //货币
      getCurrencySelect().then(response => {
        this.accountingCurrencySelectOptions = response.data;
        this.orderCurrencySelectOptions = response.data;
        this.orderCurrencyListSelectOptions = response.data;
      });
      //入账账户
      getAccountSelect().then(response => {
        this.accountingAccountSelectOptions = response.data;
      });
      //收款方
      getRegisterCustomerPayeeSelect().then(response => {
        this.payeeSelectOptions = response.data;
        this.payeeListSelectOptions = response.data;
      });
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.form = {
        name: undefined
      };
      this.resetForm("form");
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      //清空日历控件
      this.dateRange = [];
      this.dateRange2 = [];
      this.resetForm("queryForm");
      this.handleQuery();
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.id)
      this.single = selection.length != 1
      this.multiple = !selection.length
    },
    formatDate(date) {
      const year = date.getFullYear();
      const month = String(date.getMonth() + 1).padStart(2, '0'); // Months are 0-based
      const day = String(date.getDate()).padStart(2, '0');
      const hours = String(date.getHours()).padStart(2, '0');
      const minutes = String(date.getMinutes()).padStart(2, '0');
      const seconds = String(date.getSeconds()).padStart(2, '0');
      return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.reset();
      this.modifyMessage = "其他";
      this.showAddOrUpdateView = true;
      this.showDetailView = false;
      this.showPayerDisabled = false;
      getUnique().then(response => {
        this.form.orderId = response;
        this.open = true;
        this.title = "添加";
        // this.nationalId = null;
        //清空操作
        //下拉
        this.auditStatus = [];
        this.payee = [];
        this.orderCurrency = [];
        this.occurNational = [];
        this.accountingCurrency = [];
        this.accountingAccount = [];
        //图片
        this.businessList = [];
        this.contractDocumentsFile = [];
        this.expressDeliveryFile = [];
        this.customsClearanceFile = [];
        this.paymentReceiptFile = [];
      });
      //添加则不显示创建人创建时间跟修改信息
      this.showBtn = true;
      this.showModifyTime = false;
      this.showModifyByName = false;
      this.showModifyDescription = false;
      this.showModifyMsg = false;
      this.showCreateTime = false;
      this.showCreateByName = true;
      this.showCreateTimeAndName = false;
      this.showCreateMsg = false;
      this.showAuditMsg = false;
      this.showAccountingMsg = false;
      this.showAccountingId = false;
      this.showExpressDelivery = true;
    },
    /** 修改按钮操作 */
    handleUpdate(row, status) {
      this.modifyMessage = "变更";
      this.showModifyMsg = true;
      this.showCreateTime = true;
      this.showCreateByName = false;
      this.showExpressDelivery = true;
      var titleStr = "";
      if (status == 'edit') {
        //修改人和修改时间隐藏
        this.showBtn = true;
        this.showModifyTime = false;
        this.showModifyByName = false;
        this.showAddOrUpdateView = true;
        this.showDetailView = false;

        this.showCreateTimeAndName = true;
        this.showCreateMsg = true;
        this.showAuditMsg = false;
        this.showAccountingMsg = false;
        this.showAccountingId = false;
        this.showPayerDisabled = false;
        titleStr = "修改";
      } else if (status == 'detail') {
        //全显示且保存隐藏
        this.showAddOrUpdateView = false;
        this.showDetailView = true;
        this.showBtn = false;
        this.showModifyTime = true;
        this.showModifyByName = true;

        this.showCreateTimeAndName = true;
        this.showCreateMsg = true;
        titleStr = "详情";
      } else if (status == 'accounting') {
        //入账
        this.showCreateMsg = false;
        this.showCreateTimeAndName = true;
        //隐藏快递单据
        this.showExpressDelivery = false;
        //显示入账信息,除详情外不显示
        this.showAccountingMsg = true;
        this.showAuditMsg = false;
        this.showAccountingId = true;
        this.showAddOrUpdateView = true;
        this.showDetailView = false;
        this.showBtn = true;
        this.showPayerDisabled = true;

        titleStr = "入账";

      } else if (status == 'audit') {
        //审核
        this.showCreateMsg = false;
        this.showCreateTimeAndName = true;

        //显示审核信息，除详情外不显示
        this.showAuditMsg = true;
        this.showAccountingMsg = false;
        this.showAccountingId = false;
        this.showAddOrUpdateView = true;
        this.showDetailView = false;
        this.showBtn = true;
        this.showPayerDisabled = true;

        titleStr = "审核";

      }

      this.reset();
      const id = row.id || this.ids
      getPaymentOrder(id).then(response => {
        this.form = response.data;
        this.formView = response.data;
        this.open = true;
        this.title = titleStr;
        //下拉回显
        const auditStatus = this.auditStatusSelectOptions.find(option => option.code == response.data.auditStatus);
        if (auditStatus) {
          this.auditStatus = auditStatus;
        }
        const payee = this.payeeSelectOptions.find(option => option.code == response.data.payee);
        if (payee) {
          this.payee = payee;
        }
        const orderCurrency = this.orderCurrencySelectOptions.find(option => option.code == response.data.orderCurrency);
        if (orderCurrency) {
          this.orderCurrency = orderCurrency;
        }
        const occurNational = this.occurNationalSelectOptions.find(option => option.code == response.data.occurNational);
        if (occurNational) {
          this.occurNational = occurNational;
        }
        const accountingCurrency = this.accountingCurrencySelectOptions.find(option => option.code == response.data.accountingCurrency);
        if (accountingCurrency) {
          this.accountingCurrency = accountingCurrency;
        }
        const accountingAccount = this.accountingAccountSelectOptions.find(option => option.code == response.data.accountingAccount);
        if (accountingAccount) {
          this.accountingAccount = accountingAccount;
        }

        //图片回显
        if (response.data.businessList) {
          const businessListArr = response.data.businessList.split(",");
          this.businessList = businessListArr.map((url, index) => {
            return {
              name: url.split('/').pop(),
              url: url.trim(), // 去除 URL 前后可能存在的空格
              uid: index + 1,  // 设置一个唯一的 uid
            };
          });
        } else {
          this.businessList = [];
        }

        if (response.data.contractDocuments) {
          const contractDocumentsArr = response.data.contractDocuments.split(",");
          this.contractDocumentsFile = contractDocumentsArr.map((url, index) => {
            return {
              name: url.split('/').pop(),
              url: url.trim(), // 去除 URL 前后可能存在的空格
              uid: index + 1,  // 设置一个唯一的 uid
            };
          });
        } else {
          this.contractDocumentsFile = [];
        }

        if (response.data.expressDelivery) {
          const expressDeliveryArr = response.data.expressDelivery.split(",");
          this.expressDeliveryFile = expressDeliveryArr.map((url, index) => {
            return {
              name: url.split('/').pop(),
              url: url.trim(), // 去除 URL 前后可能存在的空格
              uid: index + 1,  // 设置一个唯一的 uid
            };
          });
        } else {
          this.expressDeliveryFile = [];
        }

        if (response.data.customsClearance) {
          const customsClearanceArr = response.data.customsClearance.split(",");
          this.customsClearanceFile = customsClearanceArr.map((url, index) => {
            return {
              name: url.split('/').pop(),
              url: url.trim(), // 去除 URL 前后可能存在的空格
              uid: index + 1,  // 设置一个唯一的 uid
            };
          });
        } else {
          this.customsClearanceFile = [];
        }


        if (response.data.paymentReceipt) {
          const paymentReceiptArr = response.data.paymentReceipt.split(",");
          this.paymentReceiptFile = paymentReceiptArr.map((url, index) => {
            return {
              name: url.split('/').pop(),
              url: url.trim(), // 去除 URL 前后可能存在的空格
              uid: index + 1,  // 设置一个唯一的 uid
            };
          });
        } else {
          this.paymentReceiptFile = [];
        }


      });
    },
    /** 提交按钮 */
    submitForm: function () {
      this.$refs["form"].validate(valid => {
        if (valid) {

          if (this.orderCurrency != null && this.orderCurrency.code != null) {
            this.form.orderCurrency = this.orderCurrency.code;
          } else {
            this.$message.error(`请选择订单币种`);
            return;
          }

          if (this.payee != null && this.payee.code != null) {
            this.form.payee = this.payee.code;
          } else {
            this.$message.error(`请选择收款方`);
            return;
          }

          if (this.occurNational != null && this.occurNational.code != null) {
            this.form.occurNational = this.occurNational.code;
          } else {
            this.$message.error(`请选择发生国`);
            return;
          }

          if (this.accountingCurrency != null && this.accountingCurrency.code != null) {
            this.form.accountingCurrency = this.accountingCurrency.code;
          }

          if (this.accountingAccount != null && this.accountingAccount.code != null) {
            this.form.accountingAccount = this.accountingAccount.code;
          }


          if (this.showAuditMsg) {
            this.form.auditStatus = '1';
            //为true则给审核操作判空
            if (this.auditStatus != null && this.auditStatus.code != null) {
              this.form.auditStatus = this.auditStatus.code;
            } else {
              this.$message.error(`审核操作不能为空`);
              return;
            }
          }
          if (this.showAccountingMsg) {
            this.form.orderStatus = '1';
          }


          if (this.form.id != undefined) {
            updatePaymentOrder(this.form).then(response => {
              this.$modal.msgSuccess("修改成功");
              this.open = false;
              this.getList();
            });
          } else {
            addPaymentOrder(this.form).then(response => {
              this.$modal.msgSuccess("新增成功");
              this.open = false;
              this.getList();
            });
          }
        }
      });
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      const id = row.id || this.ids
      this.$modal.confirm('是否确认删除编号为"' + id + '"的数据项？').then(function () {
        return delProviders(id);
      }).then(() => {
        this.getList();
        this.$modal.msgSuccess("删除成功");
      }).catch(() => {
      });
    }
  }
};
</script>
<style>
.my-dropdown .el-popper {
  /* 控制下拉框的弹出方向 */
  /* 例如，下拉框向上弹出 */
  top: -50px !important;
  bottom: 100% !important;
}

.image-container {
  text-align: left;
}

.image-item {
  display: inline-block; /* 设置为行内块元素 */
  width: 33.33%; /* 每行最多显示三张图片 */
  margin-bottom: 10px; /* 图片之间的间距 */
}

</style>
